<template>
  <div class="total_box">
    <el-icon class="icon"><Warning /></el-icon>
    <div class="text"> <span style="color: #909399">订单总金额：</span> ￥{{ orderAmountTotal }}</div>
    <div class="text"> <span style="color: #909399">已付款金额：</span>￥{{ accountPaid }}</div>
    <div class="text">
      <span style="color: #909399">未付款金额：</span><span class="amount">￥{{ nonPayment }}</span>
    </div>
  </div>
  <el-table :data="orderList" stripe style="width: 100%" :header-cell-style="{ background: '#fafafa', color: '#909399' }">
    <el-table-column prop="order_no" label="订单编号" width="320" />
    <el-table-column prop="name" label="产品信息" width="250">
      <template #default="scope">
        <div class="product_info" v-for="item in scope.row.product" :key="item.product_id">
          <el-image class="product_left" :src="item.cover" fit="cover">
            <template #error>
              <el-icon><icon-picture /></el-icon>
            </template>
          </el-image>
          <div class="product_right">
            <div class="product_right_name">{{ item.product_name }}</div>
            <div class="product_right_stock_name">规格：{{ item.stock_name }}</div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="order_amount" label="订单金额" width="200">
      <template #default="scope">
        {{ `￥${scope.row.order_amount}` }}
      </template>
    </el-table-column>
    <el-table-column prop="created_user" label="订单状态" width="200">
      <template #default="scope">
        {{ scope.row.pay_state == 1 ? '未付款' : '已付款' }}
      </template>
    </el-table-column>
    <el-table-column prop="created_at" label="下单时间" width="200" />
    <el-table-column prop="remark" label="备注" width="200" />
    <el-table-column prop="belong_name" label="归属员工" width="200"> </el-table-column>
    <el-table-column prop="created_name" label="审核状态" width="200">
      <template #default="scope">
        {{ onSate(scope.row.state) }}
      </template>
    </el-table-column>
    <el-table-column prop="belong_name" label="审核人" width="200" />
    <el-table-column prop="created_name" label="操作" width="200">
      <template #default="scope">
        <el-button v-if="scope.row.submit_button" size="small" @click="onAudit(scope.row)">审核</el-button>
        <el-button size="small" @click="onLook(scope.row)">查看</el-button>
      </template>
    </el-table-column>
    <template #empty>
      <div class="empty">
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">暂无数据</div>
      </div>
    </template>
  </el-table>
  <AuditDialog ref="AuditDialogRef" @submit="handleSubmit" />
</template>

<script setup lang="ts">
  import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
  import AuditDialog from '../../../ordermanagement/components/AuditDialog.vue'
  import { add } from '@/utils/math'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { computed, ref } from 'vue'
  import { useRouter } from 'vue-router'
  interface Props {
    orderList: any
  }
  const props = withDefaults(defineProps<Props>(), {
    orderList: () => []
  })
  const emit = defineEmits(['submit'])
  const router = useRouter()
  const orderAmountTotal = computed(() => {
    let total = 0
    props.orderList.forEach((item: any) => {
      total = add(total, item.order_amount)
    })
    return total
  })
  const accountPaid = computed(() => {
    let total = 0
    props.orderList.forEach((item: any) => {
      if (item.pay_state == 1) {
        total = add(total, item.order_amount)
      }
    })
    return total
  })
  const nonPayment = computed(() => {
    let total = 0
    props.orderList.forEach((item: any) => {
      if (item.pay_state == 2) {
        total = add(total, item.order_amount)
      }
    })
    return total
  })
  const onSate = (state: any) => {
    if (state == 1) {
      return '待审核'
    } else if (state == 2) {
      return '通过'
    } else if (state == 3) {
      return '不通过'
    } else {
      return '--'
    }
  }
  const AuditDialogRef = ref<any>(null)
  const rowData = ref<any>({})
  const onAudit = (row: any) => {
    rowData.value = row
    AuditDialogRef.value.handleAuditDialog(row)
  }
  const handleSubmit = () => {
    emit('submit')
  }
  const onLook = (row: any) => {
    router.push({ path: '/salesleads/salesmanagement/ordermanagement/neworder', query: { type: 'look', id: row.order_id } })
  }
</script>

<style lang="scss" scoped>
  .empty {
    padding: 100px 0;
    .emty_img {
      transform: translateX(15%);
    }
  }
  .product_info {
    display: flex;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    &:nth-child(odd) {
      margin-bottom: 10px;
    }
    .product_left {
      width: 48px;
      height: 48px;
      font-size: 48px;
      margin-right: 10px;
      display: grid;
      place-content: center;
    }
    .product_right {
      .product_right_name {
        height: 24px;
      }
      .product_right_stock_name {
        height: 24px;

        font-size: 12px;
        color: #969696;
      }
    }
  }
  .img_icon {
    width: 20px;
  }
  .el-button {
    margin-bottom: -8px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 24px;
    margin: 0 4px 8px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    text-align: center;
    background: #fff;
  }
  .total_box {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 16px;
    font-size: 14px;
    background: #fffaf9;
    border: 1px solid #ffc69e;
    color: #33302d;
    .icon {
      width: 30px;
      font-size: 16px;
      color: #ff6b00;
    }
    .text {
      margin-right: 10px;
    }
    .amount {
      color: #ff6b00;
    }
  }
</style>
